<template>
  <el-card>
    <!-- 标题 -->
    <el-row>
      <el-col :span="24">
        <span style="font-weight:600;float:left">新增试题</span>
        <el-button
          size="mini"
          type="primary"
          plain
          class="addTestBtn"
          style="margin-right:20px;float:right"
          @click="$emit('changeShow',isShow,false)"
        >返回列表</el-button>
      </el-col>
    </el-row>
    <!-- 表单 -->
    <el-form :rules="rules">
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="学科名称">
            <el-select
              v-model="queryData.subject_id"
              size="medium"
              placeholder="请选择学科名称"
              @change="changeSubject"
            >
              <el-option v-for="item in SubjectNameList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目录名称">
            <el-select v-model="queryData.directory_id" size="medium" placeholder="请选择目录名称" @change="changeDirectory">
              <el-option v-for="item in directoryNameList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签名称">
            <el-select v-model="queryData.tag_id" multiple size="medium" placeholder="请选择标签名称">
              <el-option v-for="item in tagNameList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="8">
          <el-form-item label="试题难度">
            <el-radio v-model="queryData.difficulty" :label="1">简单</el-radio>
            <el-radio v-model="queryData.difficulty" :label="2">中等</el-radio>
            <el-radio v-model="queryData.difficulty" :label="3">较难</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试题类型名称">
            <el-select v-model="queryData.quest_type" size="medium" placeholder="请选择试题类型">
              <el-option :value="1" label="单选题" />
              <el-option :value="2" label="多选题" />
              <el-option :value="3" label="判断题" />
              <el-option :value="4" label="简答题" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否面试真题">
            <el-radio v-model="queryData.is_true_question" label="1">是</el-radio>
            <el-radio v-model="queryData.is_true_question" label="2">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 富文本编辑器  题干信息 -->
      <el-form-item label="题干信息" label-width="80px">
        <AvueUeditor v-model="queryData.question" />
      </el-form-item>
      <!-- 单选题 -->
      <el-form-item v-if="queryData.quest_type===1" label="试题答案" label-width="80px">
        <el-table :data="radioList">
          <el-table-column label="单选项" width="90">
            <template slot-scope="{row}">
              <!-- 绑定answer单选 -->
              <el-radio v-model="queryData.quest_answer" :label="row.code">{{ row.code }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="单选项内容" width="1000">
            <template slot-scope="{row}">
              <el-input v-model="row.content" type="textarea" placeholder="请输入选项内容" />
            </template>
          </el-table-column>
          <el-table-column label="选项图片" width="150" />
          <el-table-column label="操作" width="140">
            <template slot-scope="{row, $index }">
              <el-button v-if="$index+1===radioList.length" type="danger" icon="el-icon-delete" circle />
              <el-button v-if="$index+1===radioList.length" type="success" icon="el-icon-plus" circle />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 多选题 -->
      <el-form-item v-else-if="queryData.quest_type===2" label="试题答案" label-width="80px">
        <el-table :data="checkboxList">
          <el-table-column label="多选项" width="90">
            <!-- 绑定多选数组 -->
            <template slot-scope="{row}">
              <el-checkbox-group v-model="row.is_true">
                <el-checkbox :label="true">{{ row.code }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
          <el-table-column label="多选项内容" width="1000">
            <template slot-scope="{row}">
              <el-input v-model="row.content" type="textarea" placeholder="请输入选项内容" />
            </template>
          </el-table-column>
          <el-table-column label="选项图片" width="150" />
          <el-table-column label="操作" width="140">
            <template slot-scope="{row,$index}">
              <el-button v-if="$index+1===checkboxList.length" type="danger" icon="el-icon-delete" circle @click.native="delBtnRow($index)" />
              <el-button v-if="$index+1===checkboxList.length" type="success" icon="el-icon-plus" circle @click.native="addBtnRow($index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 判断题 -->
      <el-form-item v-else-if="queryData.quest_type===3" label="试题答案" label-width="80px">
        <el-radio v-model="queryData.quest_answer" label="正确">正确</el-radio>
        <el-radio v-model="queryData.quest_answer" label="错误">错误</el-radio>
      </el-form-item>
      <!-- 简答题 -->
      <el-form-item v-else-if="queryData.quest_type===4" label="试题答案" label-width="80px">
        <AvueUeditor v-model="queryData.quest_answer" />
      </el-form-item>
      <el-form-item v-else label="试题答案" label-width="80px">
        请选择试题类型，生成答案模板
      </el-form-item>
      <!-- 富文本编辑器  答案解析 -->
      <el-form-item label="答案解析" label-width="80px">
        <AvueUeditor v-model="queryData.quest_remark" />
      </el-form-item>
      <el-form-item label-width="80px">
        <el-button type="primary" @click="btnOK">提交</el-button>
        <el-button @click="btnCancle">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { getSubjectNameAPI, addTestAPI, editQuestionTestAPI } from '@/api/question'
export default {
  name: 'AddTestBank',
  props: {
    isShow: {
      type: Boolean,
      default: true
    },
    questionTestDetail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      queryData: {
        subject_id: '',
        directory_id: '',
        tag_id: [],
        difficulty: '',
        quest_type: '',
        is_true_question: '', // 是否真题
        quest_answer: '', // 答案
        quest_options: [], // 答案类型 单选 多选 判断
        quest_remark: '', // 答案解析
        question: '' // 富文本
      },
      // 学科名称列表
      SubjectNameList: [],
      // 目录名称列表
      directoryNameList: [],
      // 标签名称列表
      tagNameList: [],
      // 单选数组
      radioList: [
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ],
      // 多选数组
      checkboxList: [
        { code: 'A', content: '', is_true: false, pic: '' },
        { code: 'B', content: '', is_true: false, pic: '' },
        { code: 'C', content: '', is_true: false, pic: '' },
        { code: 'D', content: '', is_true: false, pic: '' }
      ],
      checkboxBtn: ['C', 'D', 'E', 'F'],
      // 判断题
      judgeList: [
        { code: '正确', content: '', is_true: false, pic: '' },
        { code: '错误', content: '', is_true: false, pic: '' }
      ]
    }
  },
  watch: {
    // 监听单选
    queryData: {
      deep: true,
      handler(val) {
        // console.log(val.quest_answer)
        // 单选
        this.radioList.forEach(item => {
          item.is_true = false
        })
        this.radioList.forEach(item => {
          if (item.code === val.quest_answer) {
            item.is_true = true
          }
        })
        // 判断
        this.judgeList.forEach(item => {
          item.is_true = false
        })
        this.judgeList.forEach(item => {
          if (item.code === val.quest_answer) {
            item.is_true = true
          }
        })
      }
    },
    // 监听多选
    checkboxList: {
      deep: true,
      handler(val) {
        console.log(val)
        this.queryData.quest_options = val
        const trueList = []
        this.queryData.quest_options.forEach((item) => {
          if (item.is_true === true) {
            trueList.push(item.code)
          }
        })
        this.queryData.quest_answer = trueList.join(',')
      }
    },
    // 监听回显数据
    questionTestDetail: {
      deep: true,
      handler(val) {
        console.log(val.quest_options)
        this.queryData = val
        // this.checkboxList = JSON.parse(val.quest_options) || this.checkboxList
        this.queryData.quest_remark = val.quest_remark
        this.queryData.quest_options = val.quest_options
        // this.queryData.id = val.id
        // this.queryData.subject_id = val.subject_id
        // this.queryData.directory_id = val.directory_id
        // this.queryData.tag_id = val.tag_id
        // this.queryData.difficulty = val.difficulty
        // this.queryData.quest_type = val.quest_type
        // this.queryData.is_true_question = val.is_true_question
        // this.queryData.quest_answer = val.quest_answer
        // this.queryData.quest_remark = val.quest_remark
        // this.queryData.question = val.question
      }
    }
  },
  created() {
    this.getSubjectName()
  },
  methods: {
    // 7,减少按钮
    delBtnRow() {
      if (this.checkboxList.length < 3) return this.$message.error('最少两个选项')
      this.checkboxList.pop()
    },
    // 6，新增多选按钮
    addBtnRow($index) {
      if (this.checkboxList.length > 5) return this.$message.error('最多六个选项')
      this.checkboxList.push({
        code: this.checkboxBtn[$index - 1], content: '', is_true: false, pic: ''
      })
    },
    // 5,取消事件
    btnCancle() {
      this.queryData = {
        subject_id: '',
        directory_id: '',
        tag_id: [],
        difficulty: '',
        quest_type: '',
        is_true_question: '',
        quest_answer: '', // 答案
        quest_options: [], // 答案类型 单选 多选 判断
        quest_remark: '', // 答案解析
        question: '' // 富文本
      }
      this.$emit('changeShow', this.isShow, false)
    },
    // 4.提交事件
    async btnOK() {
      if (this.queryData.quest_type === 1) {
        this.queryData.quest_options = [...this.radioList]
      }
      if (this.queryData.quest_type === 3) {
        this.queryData.quest_options = [...this.judgeList]
      }
      if (this.queryData.id) {
        await editQuestionTestAPI(this.queryData)
      } else {
        await addTestAPI(this.queryData)
      }
      // console.log(res)
      this.$message.success('操作成功')
      this.btnCancle()
      this.$emit('updateTestList')
    },
    // 3,获取标签名称列表
    changeDirectory(event) {
      this.queryData.tag_id = ''
      // console.log(event)
      const res = this.directoryNameList.find(item => item.id === event)
      // console.log(res)
      this.tagNameList = res.children
    },
    // 2，获取目录名称列表
    changeSubject(event) {
      this.queryData.directory_id = ''
      this.queryData.tag_id = ''
      // console.log(event)
      const res = this.SubjectNameList.find(item => item.id === event)
      // console.log(res)
      this.directoryNameList = res.children
    },
    // 1, 获取学科名称
    async getSubjectName() {
      const res = await getSubjectNameAPI()
      // console.log(res)
      this.SubjectNameList = res
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
